<template>
  <div class="sale-category-container">
    <el-card>
      <div slot="header">
        <div class="header">
          <span>销售额类别占比</span>
          <div>
            <el-radio-group v-model="value" size="small" @change="onChange">
              <el-radio-button
                :label="item.label"
                :key="index"
                v-for="(item, index) in radioValue"
                :name="item.name"
              />
            </el-radio-group>
          </div>
        </div>
      </div>
      <div ref="pieChart" class="pie-chart" />
      <div />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SaleCategory',
  components: {},
  props: {},
  data () {
    return {
      value: '销售额',
      myChart: null,
      colorList: [
        '#73DDFF',
        '#73ACFF',
        '#FDD56A',
        '#FDB36A',
        '#FD866A',
        '#9E87FF',
        '#58D5FF'
      ],
      radioValue: [
        {
          label: '销售额'
        },
        {
          label: '线上'
        },
        {
          label: '线下'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initPieChart()
  },
  methods: {
    initPieChart () {
      const option = {
        title: {
          text: '视频广告',
          subtext: '300',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 25
          },
          subtextStyle: {
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['50%', '85%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: params => {
                  return this.colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c}'
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: [
              {
                name: '视频广告',
                value: 300
              },
              {
                name: '搜索引擎',
                value: 1048
              },
              {
                name: '直接访问',
                value: 735
              },
              {
                name: '邮件营销',
                value: 580
              },
              {
                name: '联盟广告',
                value: 484
              }
            ]
          }
        ]
      }
      this.myChart = this.$echarts.init(this.$refs.pieChart)
      this.myChart.setOption(option)
      this.myChart.on('mouseover', params => {
        const { name, value } = params.data
        this.myChart.setOption({
          title: {
            text: name,
            subtext: value
          }
        })
      })
    },
    onChange (value) {
      var options = {}
      if (value === '线上') {
        options = {
          title: {
            text: '视频广告',
            subtext: '200',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 25
            },
            subtextStyle: {
              fontSize: 18
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['50%', '85%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: params => {
                    return this.colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}:{c}'
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1
                  }
                }
              },
              data: [
                {
                  name: '视频广告',
                  value: 888
                },
                {
                  name: '搜索引擎',
                  value: 777
                },
                {
                  name: '直接访问',
                  value: 666
                },
                {
                  name: '邮件营销',
                  value: 555
                },
                {
                  name: '联盟广告',
                  value: 333
                }
              ]
            }
          ]
        }
      } else {
        options = {
          title: {
            text: '视频广告',
            subtext: '300',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 25
            },
            subtextStyle: {
              fontSize: 18
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['50%', '85%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: params => {
                    return this.colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}:{c}'
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1
                  }
                }
              },
              data: [
                {
                  name: '视频广告',
                  value: 333
                },
                {
                  name: '搜索引擎',
                  value: 555
                },
                {
                  name: '直接访问',
                  value: 666
                },
                {
                  name: '邮件营销',
                  value: 777
                },
                {
                  name: '联盟广告',
                  value: 888
                }
              ]
            }
          ]
        }
      }
      this.myChart.setOption(options)
    }
  }
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pie-chart {
  height: 300px;
  width: 100%;
}
</style>
